<template>
  <view>
    <u-navbar
      v-if="!$isWeixin()"
      :title="title"
      :titleBold="true"
      :background="{ backgroundColor: '#ffffff' }"
      :is-fixed="true"
    ></u-navbar>
    <u-tabs active-color="#FF7A23" :list="tabList" :current="tabIndex" @change="index => (tabIndex = index)"></u-tabs>

    <view class="" v-if="tabIndex == 0">
      <u-cell-group>
        <u-cell-item title="验收效果图" :arrow="false" style="padding-bottom: 0;" :border-bottom="false"></u-cell-item>
        <u-cell-item style="padding: 10rpx;" :arrow="false">
          <image-upload @change="onImageChange" v-model="imageList"></image-upload>
        </u-cell-item>
        <u-cell-item style="padding: 10rpx;" :arrow="false">
          <file-picker @change="onFileChange" v-model="fileList"></file-picker>
        </u-cell-item>
      </u-cell-group>

      <block v-if="showReview">
        <u-gap height="40" bg-color="#f5f5f5"></u-gap>
        <review-form ref="reviewForm"></review-form>
      </block>
    </view>

    <view class="" v-if="tabIndex === 1"><relations :list="state.This_Dealer_RelationList"></relations></view>

    <view class="" v-if="tabIndex === 2">
      <u-cell-item
        v-if="state.ShowLevel != 1"
        title="一级经销商名称"
        :arrow="false"
        :border-bottom="state.ShowLevel == 3"
        :value="state.First_Dealer_BaseInfo.Name"
      ></u-cell-item>

      <view class="" v-if="state.ShowLevel != 3">
        <basic-information
          :data="DealerInfo"
          :showOtherInfo="false"
          :level="state.ShowLevel"
          :showReview="false"
          :showParent="false"
          :showDeliveryAddress="false"
          :loadCity="loadCity"
        ></basic-information>
      </view>

      <view class="" v-show="state.ShowLevel == 3">
        <u-cell-item
          title="二级经销商名称"
          :arrow="false"
          :border-bottom="false"
          :value="state.Double_Dealer_BaseInfo.Name"
        ></u-cell-item>
        <store-information :data="state.Door_Dealer_BaseInfo"></store-information>
      </view>
    </view>

    <view class="" v-if="tabIndex === 3">
      <design-information :data="DesignInfo" :showReview="true" :selectType="3"></design-information>
    </view>

    <view class="btn-group-fixed"><u-button v-if="showReview" type="warning" @tap="submit">提交审核</u-button></view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '设计验收审核',
      tabList: [{ name: '协议上传' }, { name: '销售业务关系' }, { name: '基本信息' }, { name: '其他设计验收' }],
      tabIndex: 0,

      loadCity: false,

      imageList: [],
      fileList: [],

      showReview: false,

      state: {
        ShowLevel: null,
        First_Dealer_BaseInfo: {},
        Double_Dealer_BaseInfo: {},
        Door_Dealer_BaseInfo: {},
        This_Dealer_OtherInfo: {},
        DealerAuditInfo: {},
        This_Dealer_RelationList: [],
        InitialPhotoList: [],
        DesignPhotoList: [],
        FileList: []
      },

      DesignInfo: {
        DesignPhotoList: [],
        DealerAuditInfo: {},
        FileList: [],
        InitialPhotoList: [],
        AuditForList: []
      },

      DealerInfo: {
        Dealer_BaseInfo: {},
        Dealer_OtherInfo: {}
      },

      form: {
        AgreementAcceptanceId: '',
        DealerId: '',
        Type: 3,
        ObjectId: '',
        AgreementPhotoList: [],
        AuditRemark: '',
        State: ''
      }
    };
  },
  onLoad(options) {
    if (options.Id) {
      this.form.AgreementAcceptanceId = options.Id;
    }
    if (options.DealerId) {
      this.form.DealerId = options.DealerId;
    }
    this.getData();
  },

  methods: {
    onImageChange(list) {
      const initialPhotoList = [];
      if (this.fileList.length > 0) {
        initialPhotoList.push(...this.filesList);
      }
      initialPhotoList.push(...list);
      this.form.AgreementPhotoList = initialPhotoList;
    },

    onFileChange(list) {
      const initialPhotoList = [];
      if (this.imageList.length > 0) {
        initialPhotoList.push(...this.imageList);
      }
      initialPhotoList.push(...list);
      this.form.AgreementPhotoList = initialPhotoList;
    },

    submit() {
      this.form.State = this.$refs.reviewForm.form.State;
      this.form.AuditRemark = this.$refs.reviewForm.form.AuditRemark;

      if (!this.form.State) {
        this.$u.toast('请选择审核状态');
        return false;
      }

      this.$u.api.approvalAgreement(this.form).then(res => {
        const { ResultCode, ResultMessage } = res;
        if (ResultCode === 1) {
          this.$refs.uToast.show({
            title: ResultMessage,
            back: true
          });
        }
      });
    },

    getData() {
      this.$u.api
        .getOtherDesignReviewDetail({
          AgreementAcceptanceId: this.form.AgreementAcceptanceId
        })
        .then(res => {
          console.log(res);
          const { ResultCode, ResultData, ResultMessage } = res;
          if (ResultCode === 1) {
            this.state = ResultData;

            if (this.vuex_user.ManagerId == res.NextManagerId) {
              this.showReview = true;
            }

            this.state.OtherAgreementInfo.AuditForList = ResultData.AuditForList;

            if (this.state.ShowLevel == 1) {
              this.DealerInfo.Dealer_BaseInfo = this.state.First_Dealer_BaseInfo;
            }
            if (this.state.ShowLevel == 2) {
              this.DealerInfo.Dealer_BaseInfo = this.state.Double_Dealer_BaseInfo;
            }

            this.imageList = this.state.AgreementPhotoList.filter(item => item.TypeId == 1);
            this.fileList = this.state.AgreementPhotoList.filter(item => item.TypeId == 4);

            this.form.AgreementPhotoList = this.state.AgreementPhotoList;

            this.DesignInfo.DesignPhotoList = this.state.DesignPhotoList;
            this.DesignInfo.DealerAuditInfo = this.state.DealerAuditInfo;
            this.DesignInfo.FileList = this.state.FileList;
            this.DesignInfo.InitialPhotoList = this.state.InitialPhotoList;

            this.DesignInfo.DesignType = this.state.DealerAuditInfo.DesignType;
            this.DesignInfo.objectType = this.state.DealerAuditInfo.ObjectType;

            let DesignTypeList = [];
            if (this.state.DealerAuditInfo.ObjectType == 5) {
              DesignTypeList = this.state.GraphicDesigns;
            }
            if (this.state.DealerAuditInfo.ObjectType == 4) {
              DesignTypeList = this.state.HeadquartersDesigns;
            }
            if (this.state.DealerAuditInfo.ObjectType == 3) {
              DesignTypeList = this.state.OtherDesigns;
            }
            this.DesignInfo.DesignTypeList = DesignTypeList;

            this.loadCity = true;
          }
        });
    }
  }
};
</script>

<style lang="scss"></style>
